<template>
  <view class="bodys" style="height: 100%">
    <view id="scroll_box" class="scroll_box">
      <scroll-view
        :style="{ height: `100%` }"
        scroll-y="true"
        class="left_box"
        :scroll-into-view="'left-' + leftItemIndex"
      >
        <view style="background-color: #fff">
          <view
            v-for="(item, i) in productData.leftList"
            :id="'left-' + i"
            :key="i"
            class="left_item"
            :data-index="i"
            :class="{ select: i == leftIndex }"
            @click="leftItemClickHandle(i)"
          >
            <view
              :class="
                i == leftItemIndex
                  ? `item_box1`
                  : `item_box2 ${i === leftItemIndex + 1 ? 'q' : ''} ${
                      i === leftItemIndex - 1 ? 'h' : ''
                    }`
              "
            >
              <view class="txt">{{ item.title }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
      <scroll-view
        :style="{ height: `100%` }"
        scroll-y="true"
        class="right_box"
        scroll-with-animation="true"
        :scroll-into-view="'item-' + leftIndex1"
        @scroll="rightScroll"
      >
        <view
          v-for="(item, i) in productData.rightList"
          :id="'item-' + i"
          :key="i"
          class="right_item"
          @touchmove="rightTouchmove"
        >
          <view class="right_item_box">
            <view class="rigth_title">
              <text style="color: black"> {{ item.title }}</text>
            </view>
            <view v-for="(items, j) in item.goodsList" :key="j" class="list">
              <view class="image_box">
                <image
                  lazy-load
                  class="goods_image"
                  :src="'http://upyun-cdn.hyunst.com/' + items.image"
                  mode=""
                ></image>
              </view>
              <view class="des">
                <text class="goodsName li">{{ items.goodsName }}</text>
                <text class="goodsSales li">{{ `销售量 ${items.sales}` }}</text>
                <view class="goodsPrice li">
                  <text style="font-size: 0.7rem; margin-right: 5rpx">¥</text>
                  <text>{{ `${items.price}起` }}</text>
                </view>

                <view class="goodsNumber">
                  <view v-if="j != 0 && j != 1" class="icon-box">
                    <u-icon
                      name="minus-circle"
                      color="#40a9ff"
                      size="20"
                    ></u-icon>
                    <text style="margin: 0 10rpx">0</text>
                    <u-icon
                      name="plus-circle-fill"
                      color="#40a9ff"
                      size="20"
                    ></u-icon>
                  </view>

                  <view v-else class="icon-box">
                    <view class="specs" @click="selectSpecsHandle(items)"
                      >选规格</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <mySpecs
      ref="productSpecsRef"
      v-model:popup-show="specs.popupShow"
      :list="sku.list"
      :default-sku="sku.defaultAttr"
      :show-sku-info="sku.defaultSku"
      @select-item-handle="selectItemHandle"
      @submit-select-handle="submitSelectHandle"
    ></mySpecs>
  </view>
</template>

<script setup lang="ts">
import { ref, toRefs, reactive, onMounted, nextTick } from 'vue'

import type { ShopMerchantMenu, GoodsList } from '@/type/merchant/shopMenu'

import mySpecs from './specs.vue'

import { getCurrentInstance } from 'vue'

import { useSpecs } from './hook/menu/useSpecs'

let currentInstance = getCurrentInstance()

const emit = defineEmits([''])
const props = defineProps({
  menuData: {
    type: Array<Object>,
    default: '',
  },
})

const { menuData } = toRefs(props)

/**
 * 参数规格选择
 */
const {
  specs,
  sku,
  productSpecsRef,
  selectSpecsHandle,
  selectItemHandle,
  submitSelectHandle,
} = useSpecs()

const productData = reactive({
  leftList: [] as Array<ShopMerchantMenu>,
  rightList: [] as Array<ShopMerchantMenu>,
  rightItem: [],
})
onMounted(() => {
  /* 等待DOM挂载完成 */
  nextTick(() => {
    /* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
    initData()
  })
})

const scrollTopSize = ref(0)
const scrollHeight = ref(0)
const initScrollView = () => {
  let view = uni.createSelectorQuery().in(currentInstance).select('#scroll_box')
  view
    .boundingClientRect((res: any) => {
      console.log(res)
      scrollTopSize.value = res.top
      scrollHeight.value = res.height
      getElementTop()
    })
    .exec()
}

const initData = () => {
  uni.showLoading({
    title: '加载中',
  })
  new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = menuData.value as Array<ShopMerchantMenu>
      productData.leftList = data
      productData.rightList = data
      uni.hideLoading()
      resolve(123)
    }, 1000)
  }).then(() => {
    nextTick(() => {
      initScrollView()
    })
  })
}
const getElementTop = () => {
  let view = uni
    .createSelectorQuery()
    .in(currentInstance)
    .selectAll('.right_item')
  view
    .boundingClientRect((data: any) => {
      console.log(data)
      productData.rightItem = data.map((v: any) => {
        console.log(scrollTopSize.value)

        return v.top - scrollTopSize.value
      })
    })
    .exec()
}
const state = ref(true)
const leftItemIndex = ref(0)
const rightScroll = (e: any) => {
  const top = e.detail.scrollTop
  console.log(top)

  if (!state.value) {
    return
  }

  for (let i = productData.rightItem.length - 1; i >= 0; i--) {
    if (top + 10 >= productData.rightItem[i]) {
      leftItemIndex.value = i
      //console.log(i)
      break
    }
  }

  if (leftIndex.value === productData.rightItem.length - 1) {
    leftItemIndex.value = productData.rightItem.length - 1
    leftIndex.value = -1
  }
}

const rightTouchmove = () => {
  state.value = true
}

const leftIndex = ref(0)
const leftIndex1 = ref(0)
const leftItemClickHandle = (index: number) => {
  state.value = false
  leftItemIndex.value = index
  leftIndex.value = index
  leftIndex1.value = index
}
</script>

<style lang="scss" scoped>
page,
.bodys {
  height: 100%;
}

.scroll_box {
  display: flex;
  height: 100%;

  .left_box {
    width: 20%;
    background-color: #eeeeee;

    .left_item {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .txt {
        font-size: 0.75rem;
        box-sizing: border-box;
        padding: 10rpx;
        color: #999999;
      }

      .item_box1 {
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        .txt {
          color: #000;
          font-weight: 700;
        }
      }

      .item_box2 {
        width: 100%;
        height: 100%;
        background-color: #eeeeee;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .q {
        border-top-right-radius: 20rpx;
      }

      .h {
        border-bottom-right-radius: 20rpx;
      }
    }
  }

  .right_box {
    width: 80%;
    background-color: #fff;

    .goods_image {
      border-radius: 10rpx;
    }

    .rigth_title {
      width: 100%;
      height: 70rpx;
      background-color: #fff;
      margin: 20rpx 0;
      box-sizing: border-box;
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      color: #303133;
      font-size: 0.85rem;
      font-weight: 700;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .right_item {
      width: 100%;
      margin-bottom: 20rpx;

      .right_item_box {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        .list {
          width: 100%;
          background-color: #fff;

          box-sizing: border-box;
          padding: 20rpx;
          display: flex;
          border-radius: 10rpx;

          .image_box {
            > image {
              width: 175rpx;
              height: 150rpx;
              display: flex;
              align-items: center;
            }
          }

          .des {
            box-sizing: border-box;
            padding: 10rpx 20rpx;
            display: flex;
            flex-direction: column;

            .li {
              margin-bottom: 10rpx;
            }

            .goodsName {
              color: #303133;
              font-size: 0.9rem;
            }
            .goodsSales {
              color: #cccccc;
              font-size: 0.6rem;
            }
            .goodsPrice {
              color: #40a9ff;
              font-size: 0.8rem;
            }

            .goodsNumber {
              width: 350rpx;
              height: 25rpx;
              display: flex;
              align-items: center;
              position: relative;

              .icon-box {
                position: absolute;
                right: 0;
                display: flex;
                align-items: center;
                font-size: 0.7rem;

                .specs {
                  width: 100rpx;
                  height: 50rpx;
                  background-color: #40a9ff;
                  color: #fff;
                  border-radius: 50rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
